<template>
	<view class="address_add">
		<uv-navbar placeholder autoBack bgColor="#CA1C1D">
			<template v-slot:left>
				<view class="left_slot">
					<image src="@/static/images/back.png"></image>
				</view>
			</template>
			<template v-slot:center>
				<view class="nav_title">绑定区域</view>
			</template>
		</uv-navbar>
		<view class="content">
			<view class="list">
				<view class="item" @click="open">
					<view class="key">请选择地区：</view>
					<view class="value">{{region_text}}</view>
					<image src="@/static/images/jt1.png"></image>
				</view>
			</view>
			<view class="submit">
				<view @click="submit">保存并使用</view>
			</view>
		</view>
		<uv-picker ref="picker" :columns="addressList" keyName="shortname" @change="change"
			@confirm="confirm"></uv-picker>
	</view>
</template>

<script setup>
	import {
		userInfo,
		regionAll,
		userEdit
	} from "@/request/api";
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		ref,
		reactive,
		shallowRef,
		computed
	} from "vue";
	const region_text = ref("");
	const form = reactive({
		province_id: "",
		city_id: "",
		area_id: ""
	});

	const provinces = ref([]),
		citys = ref([]),
		areas = ref([]);
	const pickerValue = ref([0, 0, 0]);

	const addressList = computed(() => {
		return [provinces.value, citys.value, areas.value];
	});
	const getList = async () => {
		let data = await regionAll();
		provinces.value = data.sort((left, right) => (Number(left.id) > Number(right.id) ? 1 : -1));
		handlePickValueDefault();
	};
	const handlePickValueDefault = () => {
		pickerValue.value[0] = provinces.value.findIndex(item => Number(item.id) === form.province_id);

		citys.value = provinces.value[pickerValue.value[0]]?.children || [];
		pickerValue.value[1] = citys.value.findIndex(item => Number(item.id) === form.city_id);

		areas.value = citys.value[pickerValue.value[1]]?.children || [];
		pickerValue.value[2] = areas.value.findIndex(item => Number(item.id) === form.area_id);

		picker.value.setIndexs([pickerValue.value[0], pickerValue.value[1], pickerValue.value[2]], true);
	};
	// getList();
	const picker = shallowRef();
	const open = () => picker.value.open();
	const change = (e) => {
		let {
			columnIndex,
			index,
			indexs
		} = e;
		if (columnIndex === 0) {
			citys.value = provinces.value[index]?.children || []
			areas.value = citys.value[0]?.children || []
			picker.value.setIndexs([index, 0, 0], true)
		}
		if (columnIndex === 1) {
			areas.value = citys.value[index]?.children || []
			picker.value.setIndexs(indexs, true)
		}
	};

	const confirm = (e) => {
		form.province_id = e.value[0].id;
		form.city_id = e.value[1].id;
		form.area_id = e.value[2].id;
		region_text.value = `${e.value[0].shortname}${e.value[1].shortname}${e.value[2].shortname}`;
	};
	const submit = async () => {
		await userEdit(form);
		uni.$uv.toast("操作成功");
		setTimeout(() => {
			uni.navigateBack();
		}, 1500);
	};

	const getUserInfo = async () => {
		let {
			user
		} = await userInfo();
		let {
			province_id,
			city_id,
			area_id
		} = user;
		form.province_id = province_id;
		form.city_id = city_id;
		form.area_id = area_id;
		region_text.value = user.province_full;
		getList();
	};
	getUserInfo();
</script>

<style scoped lang="scss">
	.address_add {
		min-height: calc(100vh - var(--window-top) - var(--window-bottom));
		box-sizing: border-box;
		background-color: #f5f5f5;
		overflow: hidden;

		.left_slot {
			image {
				width: 43rpx;
				height: 36rpx;
			}
		}

		.nav_title {
			color: #F5F5F5;
			font-size: 36rpx;
		}

		.content {
			padding: 20rpx;
			box-sizing: border-box;

			.list {
				border-radius: 20rpx;
				padding: 0 30rpx 40rpx;
				box-sizing: border-box;
				background: #FFFFFF;
				overflow: hidden;

				.item {
					height: 110rpx;
					border-bottom: 1px solid #EEEEEE;
					padding-right: 14rpx;
					box-sizing: border-box;
					display: flex;
					align-items: center;

					.key {
						color: #222222;
						font-size: 28rpx;
					}

					.value {
						flex: 1;
						font-size: 28rpx;
					}

					image {
						width: 18rpx;
						height: 8rpx;
					}
				}
			}

			.submit {
				margin-top: 60rpx;
				padding: 0 10rpx;
				box-sizing: border-box;

				view {
					width: 100%;
					height: 90rpx;
					line-height: 90rpx;
					text-align: center;
					color: #FFFFFF;
					font-size: 32rpx;
					border-radius: 20rpx;
					background: #CA1C1D;
				}
			}
		}
	}
</style>